    <style>
         .layui-input {
            height: 2.5rem;
            max-height: 40px;
        }

        .layui-input-block {
            margin-left: 0px;
            min-height: 1.5rem;
            max-height: 40px;
        }

        .layui-btn {
            display: inline-block;
            height: 30px;
            line-height: 30px;
            padding: 0 20px;
            background-color: #009688;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 14px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
        }

        .layui-input:focus,
        .layui-textarea:focus {
            border-color: #007457 !important
        }

        .layui-layer-btn .layui-layer-btn0 {
            border-color: #009688 !important;
            background-color: #009688 !important;
            color: #fff;
        }
    </style>
<style type="text/css" media="screen">
    .weui-cells__title {
        color: #000;
        font-size: 17px;
    }

    .weui-cell::before {
        border-top: none;
    }

    .weui-cells::before {
        border-top: none;
    }

    .weui-cells::after {
        border-bottom: none;
    }

    .my-weui-cell {
        /* border-top: 1px solid #e5e5e5; */
        border-bottom: 1px solid #e5e5e5;
    }

    .page__hd {
        /* padding: 0px; */
        padding: 0px 5px;
        padding-top: 10px;
        /* border: 1px solid #000; */
    }

    .page__title {
        margin-top: 5px;
        font-size: 20px;
        color: #333;
        text-align: center;
    }
    @media (min-width:0px) {
            html {
                font-size: 12px;
            }
        }

        @media (min-width: 320px) {
            html {
                font-size: 12px;
            }
        }

        @media (min-width: 340px) {
            html {
                font-size: 13px;
            }
        }

        @media (min-width: 360px) {
            html {
                font-size: 14px;
            }
        }

        @media (min-width: 380px) {
            html {
                font-size: 15px;
            }
        }

        @media (min-width: 400px) {
            html {
                font-size: 15px;
            }
        }

        @media (min-width: 420px) {
            html {
                font-size: 16px;
            }
        }

        .titleName img {
            max-width: 100%;
            max-height: 100%;
        }

        .appointment {
            padding-top: 1rem;
            font-size: 1.5em;
            color: #fff;
            line-height: 2em;
            text-indent: 1rem;
        }

        .appointment-describe {
            font-size: 1em;
            color: #fff;
            text-indent: 1.2rem;
        }

        .info {
            margin: 1rem;
            background-color: #f2f2f2;
            border-radius: 3px;
            height: 5rem;
            display: flex;
            justify-content: center;
            flex-direction: row;
        }

        .allNum {
            text-align: center;
        }

        .surplusNum {
            text-align: center;
        }

        .allNum-num {
            margin-top: 1rem;
            line-height: 2rem;
            font-size: 2em;
            color: #1E9FFF;
        }

        .allNum-info {
            font-size: 1em;
            color: #666;
        }

        .nannv{
            height:6rem; width: 100%; background:url(/assets/img/nannv.png) right bottom no-repeat
        }
    .weui-input{
      width:100%;
      border: 1px solid #e5e5e5;
      outline:0;
      -webkit-appearance:none;
      background-color:transparent;
      font-size:inherit;
      color:inherit;
      height:2em;
      line-height:2em;
    }
    .weui-btn_success {
        background-image: linear-gradient(#35a3a0, #4fae8e);
    }
    #js_cell_yes_date{
        dispaly:flex;
        flex-direction:column;
        text-align:center;
        line-height:40px;
    }
    .weui-input{
        height:2.2rem;
    }
</style>
<form name="form1" id="form1" role="form" data-toggle="validator" method="POST" action="">

    <div class="page">
        {:token()}
        <div class="page__bd">
            <div class="weui-cells weui-cells_form" style="margin-top:0px;font-size:14px;">
                <div class="my-weui-cell">
                    <img src="__CDN__/assets/img/nydx.png" />
                </div>

                <div class="my-weui-cell">
                    <div style=" width:100%;background-image: linear-gradient(#35a3a0, #4fae8e)">
                        <div class="nannv" style="width: 100%;">
                            <p class="appointment">疫情期间</p>
                            <p class="appointment-describe">快递预约登记</p>
                        </div>
                    </div>
                </div>

                <div class="weui-cell weui-cell_active" id="js_cell" style="margin-left: 1rem;margin-right: 1rem; padding-left:0px;padding-right:0px; dispaly:flex; flex-direction:column;">
                    <div class="weui-cell weui-cell_active weui-cell_select" style="width:100%;margin-bottom:10px;">
                        <select class="weui-select" name="house_name" id="house_name" style="padding-left: 35%;">
                            <option value=""><div style="color: #e5e5e5;">请选择快递</div></option>
                            {volist name="list" id="vo"}
                            <option name="{$vo.id}">{$vo.name}</option>
                            {/volist}
                        </select>
                    </div>
                    <div class="weui-cell weui-cell_active weui-cell_select" style="width:100%;margin-bottom:10px;">
                        <select class="weui-select" name="sex" id="sex" style="padding-left: 35%;">
                            <option value=""><div style="color: #e5e5e5;">请选择性别</div></option>
                            <option name="男">男</option>
                            <option name="女">女</option>
                        </select>
                    </div>

                    <div class="weui-cell__bd weui-flex" style="width:100%;margin-bottom:15px;">
                        <input name="yname" class="weui-input" autofocus="" type="text"  placeholder="姓名"  style="text-indent: 0.5rem;"/>
                    </div>
                    <div class="weui-cell__bd weui-flex" style="width:100%;margin-bottom:15px;">
                        <input name="ynum" class="weui-input" autofocus="" type="text" placeholder="学号/教工号/编外人员手机号" style="text-indent: 0.5rem;" />
                    </div>
                </div>

                <div class="weui-cell weui-cell_active" id="js_cell_yes"
                    style="margin-left: 1rem;margin-right: 1rem; padding-left:0px;padding-right:0px;">
                    <div class="weui-cell__bd weui-flex" id="js_cell_yes_date">
                       
                    </div>
                </div>

            </div>
            <div id="book_button" style="margin-top: 15px;">
                <span id="formSubmitBtn" type="submit" class="weui-btn weui-btn_success">预约登记</span>
            </div>
        </div>
    </div>
</form>


<script>
    // 设置rem大小
    function fontSize() {
        var deviceWidth = document.documentElement.clientWidth > 768 ? 768 : document.documentElement.clientWidth;
        document.documentElement.style.fontSize = (deviceWidth / 25) + "px";
    }
    fontSize();
    window.onresize = fontSize;
    var token = document.getElementsByName('__token__')[0].value;
    
    // 登记预约方法
    document.getElementById('formSubmitBtn').onclick=function(){
        var house_name =  $("#house_name").val();
        if (house_name == '') {
            $.alert("请选择预约快递");
            return false;
        }
        var sex =  $("#sex").val();
        if (sex == '') {
            $.alert("请选择性别");
            return false;
        }
        var name =  $("input[name='yname']").val();
        if (name == '') {
            $.alert("请输入姓名！");
            return false;
        }
        var num = $("input[name='ynum']").val();
        if (num == '') {
            $.alert("请输入学号/教工号/编外人员手机号！");
            return false;
        }
        var token = document.getElementsByName('__token__')[0].value;
        $.ajax({
            data: { house_name:house_name,sex:sex,username: name, sid: num},
            url: "{:url('index/express/index')}",
            type: "post",
            success: function (res) {
                if (res.code == 1) {
                    $.alert(res.msg,function(){
                        window.localStorage.book_username= name;
                        window.localStorage.book_usernum = num;
                        window.localStorage.house_name = house_name;
                        window.localStorage.sex =sex;
                        $("#js_cell").hide();
                        $("#book_button").hide();
                        $("#js_cell_yes").show();
                        if(res.data.count>0){
                            $("#js_cell_yes_date").html('<p style="font-size:18px">姓名：'+name+'</p><p style="font-size:18px">学号：'+num+'</p><p style="font-size:16px">预约时间：'+res.data.add_time+'</p><p style="font-size:18px">预约在'+res.data.times+'分钟内有效！</p><p style="font-size:20px;color:red;">请在 '+res.data.in_time+'  前进入</p><p style="color:red;font-size:16px">您共有'+res.data.count+'次离开时忘记扫码，若3次忘记扫码<br/>账号将自动锁定。需要联系管理员审核！</p>');
                        }else{
                            $("#js_cell_yes_date").html('<p style="font-size:18px">姓名：'+name+'</p><p style="font-size:18px">学号：'+num+'</p><p style="font-size:18px">预约时间：'+res.data.add_time+'</p><p style="font-size:18px">预约在'+res.data.times+'分钟内有效！</p><p style="font-size:20px;color:red;">请在 '+res.data.in_time+'  前进入</p>');
                        }
                        
                    });
                } else {
                    $.alert({
                        title: res.msg,
                        // text: '提示',
                        onOK: function () {
                            if(res.code == 0 )
                            {
                                window.location.href="/index.php/index/express/index";
                            }
                        }
                    });
                }
            }
        })
    }
</script>
